<template>
  <div class="iphone">
    <h2>找工作要跟老板谈</h2>
    <h3>皮皮网</h3>
    <van-field clearable label="+86 ∨" label-width="50" placeholder="请输入您的手机号码" v-model="username" />
    <van-field clearable placeholder="请输入密码" type="password" v-model="password" />
    <van-button :disabled="true&&isflay" @click="sub_card" class="btn" type="primary">下一步</van-button>
    <!-- 登录切换时牛人还是公司 -->
    <van-popup v-model="show" closeable position="bottom" :style="{ height: '50%' }">
      <div class="button">
        <van-button type="primary" size="normal" to="/position/worklist">我是牛人</van-button>
        <van-button type="primary" size="normal" to="/personnel">我是企业</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      show: false
    }
  },
  methods: {
    async sub_card () {
      if (this.password === '') return this.$Toast('请输入密码')
      const res = await this.$http.post('/login', {
        utel: this.username,
        pwd: this.password
      })
      const {
        data: { status, msg }
      } = res
      console.log(res)
      // <!-- 登录切换时牛人还是公司 -->
      this.show = true
      if (status !== 1) return this.$Toast(msg)
      // eslint-disable-next-line no-undef
      localStorage.setItem('user', this.username)
      var username = localStorage.getItem('user')
      this.$Toast(msg)
      // if (username !== '') {
      //   setTimeout(() => {
      //     localStorage.setItem('user', this.username)
      //     this.$router.push('/position/worklist')
      //   }, 1000)
      // }
    }
  },
  computed: {
    isflay () {
      return !/^1[3-9]{2}\d{8}$/g.test(this.username)
    }
  }
}
</script>

<style lang='less' scoped>
.button {
  display: flex;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  padding: 117px;
  button {
    width: 160px;
    margin-bottom: 10px;
  }
}
.app {
  background: skyblue;
  height: 639px;
}
.iphone {
  h2 {
    text-align: center;
    color: beige;
  }
  h3 {
    text-align: center;
    color: beige;
    font-weight: bold;
  }
  .btn {
    width: 100%;
    margin: 20px 0 15px 0;
  }
}
</style>
<style scoped>
.iphone >>> .van-cell {
  border-radius: 20px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}
</style>
